<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button id="btn"></button>
    </div>
    <script>
        // 箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。

        // var obj = {a:1,b:2};
        // function foo(){
        //     document.getElementById("btn").onclick = () => {
        //         console.log(this);
        //     }
        // }
        // foo();    // this指向window
        // foo.call(obj);     // this指向obj

        // 通过以上实验，我们可以发现箭头函数指向定义时在函数foo()的作用域下，所以他的this指向就是函数foo()的this 指向
        
        // var x=11;
        // var obj={
        //     x:22,
        //     say:function(){
        //         console.log(this.x)
        //     }
        // }
        // obj.say(); // 22 this指向对象obj

        
        // var x=11;
        // var obj={
        //     x:22,
        //     say:()=>{
        //     console.log(this.x);
        //     }
        // }
        // obj.say(); // 11,箭头函数say定义在对象obj中，此时obj的this指向全局

        
        // var a=11;
        // // 构造函数this指向实例对象
        // function test1(){
        //     console.log(a);         // 11
        //     console.log(this.a);    // undefined
        //     this.a=22;      
        //     console.log(a);         // 11
        //     console.log(this.a);    // 22
        //     let b=function(){
        //         console.log(a);     // 11
        //         console.log(this.a);// 11
        //     };
        //     b();
        // }
        // // 此时this指向全局下的x，所以this指向全局下的a:11
        // var x=new test1();
        // console.log(x.a);    // 22



        var a=11;
        function test2(){
            this.a=22;
            let b=()=>{console.log(this.a)}
            b();
        }
        var x=new test2();
        // 经过实例化后，此时箭头函数this指向看test2()的this指向，test2()的this指向实例化对象x,，访问的this.a相当于访问x.a
        console.log(x.a);
        console.log(this.a);


    </script>
</body>
</html>